<template>
  <div class="home">
    <!-- 轮播 -->
    <binner />
    <!-- 导航 -->
    <listitem />
    <!-- 列表展示 -->
    <div class="index-main">
      <ul>
        <li class="lists">
          <a>
            <img src="@/assets/1.png" alt="">
          </a>
          <label>
            <b>折扣价：4179</b>
            <span class="price-next">原价:5999</span>
          </label>
        </li>
      </ul>
    </div>
   
  </div>
</template>
<script>
import { provide, reactive, toRefs } from 'vue'
import binner from './banner'
import listitem from './listItem.vue'

export default {
  components:{
    binner,
    listitem
  },
  setup () {
    const state = reactive({
      imgData: [
        require('@/assets/1.png'),
        require('@/assets/2.png'),
        // require('@/assets/3.png'),
        // require('@/assets/4.png'),
       ],
       items: [
         {title: '美食1', icon: 'icon1', color: '#f00'},
         {title: '美食2', icon: 'icon1', color: '#0f0'},
         {title: '美食3', icon: 'icon1', color: '#00f'},
        //  {title: '美食4', icon: 'icon1', color: '#ccc'},
        //  {title: '美食5', icon: 'icon1', color: '#666'},
        //  {title: '美食6', icon: 'icon1', color: '#eee'},
         
       ]
    })
    provide('imgData',state.imgData)
    provide('items',state.items)
    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
